<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="force-rendering" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="author" content="IKKI &amp; Amikoko">
        <meta name="copyright" content="UED Center">
        <title>打印预览 - Kendo UI Admin by IKKI &amp; Amikoko</title>
        <link href="../img/favicon.png" rel="icon" type="image/png">
        <link href="../css/fontawesome-all.min.css" rel="stylesheet">
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link id="Amikoko" href="../css/themes/theme_default.min.css" rel="stylesheet">
        <link href="../css/amikoko.admin.css" rel="stylesheet">
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kendo.all.min.js"></script>
        <script id="IKKI" src="../js/global/kendo.zh-CHS.js"></script>
        <script src="../js/ikki.js"></script>
    </head>
    <body>
        <div class="p-5">
            <p class="text-center">
                <button class="k-button k-button-lg k-state-selected" type="button" onclick="printIt(this);"><span class="fas fa-print mr-1"></span>打 印</button>
            </p>
            <div class="row d-flex flex-row border-0" id="listViewPrint"></div>
            <div id="pagerPrint"></div>
        </div>
        <script id="printTemplate" type="text/x-kendo-template">
            <div class="col-6 border-0 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            #= nickName #
                            # if (gender === '1') { #
                                <i class="fas fa-mars mars ml-2"></i>
                            # } else if (gender === '2') { #
                                <i class="fas fa-venus venus ml-2"></i>
                            # } #
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="media">
                            <img class="img-thumbnail w-30" src="../#= photo.split(':')[0] #" alt="#= nickName #">
                            <div class="media-body ml-3">
                                <p class="display-4 mt-n1 mb-1">
                                    #= realName #
                                </p>
                                <dl class="d-flex mb-0">
                                    <dt class="font-weight-bold text-nowrap">血型：</dt>
                                    <dd class="text-black-50">
                                        # if (bloodType === '1') { #
                                            A 型
                                        # } else if (bloodType === '2') { #
                                            B 型
                                        # } else if (bloodType === '3') { #
                                            O 型
                                        # } else if (bloodType === '4') { #
                                            AB 型
                                        # } else if (bloodType === '5') { #
                                            其他
                                        # } #
                                    </dd>
                                </dl>
                                <dl class="d-flex mb-0">
                                    <dt class="font-weight-bold text-nowrap">生日：</dt>
                                    <dd class="text-black-50">#= birthday #</dd>
                                </dl>
                                <dl class="d-flex mb-0">
                                    <dt class="font-weight-bold text-nowrap">生肖：</dt>
                                    <dd class="text-black-50">#= zodiac #</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">#= summary #</div>
                </div>
            </div>
        </script>
        <script>
            $(function () {
                var dataSource = new kendo.data.DataSource({
                    data: JSON.parse(sessionStorage.getItem('printData')),
                    schema: {
                        total: function(res) {
                            return res.length;
                        },
                        model: {
                            id: 'id',
                            fields: {
                                userName: { type: 'string' },
                                realName: { type: 'string' },
                                nickName: { type: 'string' },
                                password: { type: 'string' },
                                confirmPassword: { type: 'string' },
                                online: { type: 'boolean' },
                                gender: { type: 'string' },
                                age: { type: 'number' },
                                height: { type: 'number' },
                                bloodType: { type: 'string' },
                                birthday: { type: 'date',
                                    parse: function (e) {
                                        return kendo.toString(kendo.parseDate(e), 'yyyy-MM-dd');
                                    }
                                },
                                mateBirthday: { type: 'date',
                                    parse: function (e) {
                                        return kendo.toString(kendo.parseDate(e), 'yyyy-MM-dd');
                                    }
                                },
                                creditCard: { type: 'string' },
                                asset: { type: 'number' },
                                nativePlace: { type: 'object' },
                                domicile: { type: 'object' },
                                nation: { type: 'object' },
                                zodiac: { type: 'object' },
                                language: { type: 'string' },
                                education: { type: 'object' },
                                graduation: { type: 'date',
                                    parse: function (e) {
                                        return kendo.toString(new Date(e), 'yyyy');
                                    }
                                },
                                firstJob: { type: 'date',
                                    parse: function (e) {
                                        return kendo.toString(new Date(e), 'yyyy-MM');
                                    }
                                },
                                mobile: { type: 'string' },
                                email: { type: 'string' },
                                homepage: { type: 'string' },
                                getUp: { type: 'date',
                                    parse: function (e) {
                                        return kendo.toString(kendo.parseDate(e), 'HH:mm');
                                    }
                                },
                                importantMoment: { type: 'date',
                                    parse: function (e) {
                                        return kendo.toString(kendo.parseDate(e), 'yyyy-MM-dd HH:mm');
                                    }
                                },
                                character: { type: 'number' },
                                color: { type: 'string' },
                                constellation: { type: 'object' },
                                tourism: { type: 'object' },
                                evaluation: { type: 'number' },
                                summary: { type: 'string' },
                                photo: { type: 'object' },
                                sign: { type: 'string' }
                            }
                        }
                    },
                    pageSize: 10
                });
                $('#listViewPrint').kendoListView({
                    dataSource: dataSource,
                    template: kendo.template($('#printTemplate').html())
                });
                $('#pagerPrint').kendoPager({
                    dataSource: dataSource
                });
            });
            // 打印
            function printIt(dom) {
                $(dom).parent().hide();
                $('#pagerPrint').hide();
                print();
            }
        </script>
        <style scoped>
            html, body {
                overflow-y: auto !important;
            }
        </style>
    </body>
</html>